<article class="component" id="searchbar">
  <h2 lass="component-title">Search Bar</h2>
  <p class="component-description">Searchbar of iOS style to use on top of page.</p>
  <p class="component-description">Searchbar is only a css component with out any js code.</p>
  <p>You can use <code>.search-input</code> independent.</p>

  <div class="component-example">
    <header class="bar bar-nav">
      <h1 class='title'>Searchbar</h1>
    </header>
    <div class="bar bar-header-secondary">
      <div class="searchbar">
        <a class="searchbar-cancel">Cancel</a>
        <div class="search-input">
          <label class="icon icon-search" for="search"></label>
          <input type="search" id='search' placeholder='input some query...'/>
        </div>
      </div>
    </div>
  </div>

{% highlight html %}
<header class="bar bar-nav">
  <h1 class='title'>Searchbar</h1>
</header>
<div class="bar bar-header-secondary">
  <div class="searchbar">
    <a class="searchbar-cancel">Cancel</a>
    <div class="search-input">
      <label class="icon icon-search" for="search"></label>
      <input type="search" id='search' placeholder='input some query...'/>
    </div>
  </div>
</div>
{% endhighlight %}
</article>

<article class="component">
  <h3 class="component-title">Light Searchbar</h3>
  <p>Light searchbar is to use in page content instead of in header. Light searchbar is layout with grid, it's easy to changed layout by yourself.</p>

  <div class="component-example">
    <div class="content-padded">
      <div class="searchbar">
        <div class="search-input">
          <label class="icon icon-search" for="search"></label>
          <input type="search" id='search' placeholder='query...'/>
        </div>
      </div>

      <div class="searchbar row">
        <div class="search-input col-75">
          <label class="icon icon-search" for="search"></label>
          <input type="search" id='search' placeholder='query...'/>
        </div>
        <a class="button button-fill button-primary col-25">Search</a>
      </div>

      <div class="searchbar row">
        <div class="search-input col-85">
          <input type="search" id='search' placeholder='query...'/>
        </div>
        <a class="button button-fill button-primary col-15"><span class="icon icon-search"></span></a>
      </div>
    </div>
  </div>

{% highlight html %}
<div class="content-padded">
  <div class="searchbar">
    <div class="search-input">
      <label class="icon icon-search" for="search"></label>
      <input type="search" id='search' placeholder='query...'/>
    </div>
  </div>

  <div class="searchbar row">
    <div class="search-input col-75">
      <label class="icon icon-search" for="search"></label>
      <input type="search" id='search' placeholder='query...'/>
    </div>
    <a class="button button-fill button-primary col-25">Search</a>
  </div>

  <div class="searchbar row">
    <div class="search-input col-85">
      <input type="search" id='search' placeholder='query...'/>
    </div>
    <a class="button button-fill button-primary col-15"><span class="icon icon-search"></span></a>
  </div>
</div>
{% endhighlight %}
</article>
